<template>
  <div id="app">
    <router-view></router-view>
    <!-- 滑到顶部的按钮 -->
    <transition name="fade">
      <p id="back-top" v-if="backTopFlag" @click="scollTo(0)">
        <span><i class="el-icon-arrow-up"></i></span>
      </p>
    </transition>
  </div>
</template>


<script>
  import {mapState} from "vuex";

  export default {
    name:'app',
    components:{},
    data(){
      return{
        scrollTop: 0,
        opacity: 0,
        timer: null,
        speed: 0.2,
        backTopFlag: false
      }
    },
    watch: {
      /* 监控 scrollTop 属性，适时地出现‘返回顶部’ 的按钮 */
      'scrollTop': {
        handler(value) {
          if (value > 100 && this.backTopFlag === false) {
            this.backTopFlag = true
          } else if (value <= 100 && this.backTopFlag === true){
            this.backTopFlag = false
          }
        }
      }
    },
    computed:{
      ...mapState([
        'pageName'
      ]),
    },
    mounted() {
      window.addEventListener('scroll', this.getScroll);
    },
    destroyed() {
      window.removeEventListener('scroll', this.getScroll);
    },
    methods: {
      // 每次屏幕滚动时为scrollTop赋新值
      getScroll() {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      },
      // 实现平滑滚动到固定位置
      scollTo(offset) {
        window.scrollTo({top: offset, behavior: 'smooth'})
      },
    }
  }
</script>


<style>
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar
  {
    width: 8px;  /*滚动条宽度*/
    height: 5px;  /*滚动条高度*/
    background-color:gainsboro;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: deepskyblue;  /*滚动条的背景颜色*/
  }


  /*滑到顶部*/
  #back-top{
    position: absolute;
    z-index: 9999;
  }

  #back-top span {
    cursor: pointer;
    height: 50px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 50px;
    z-index: 11;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.16);
    border-radius: 50%;
    display: flex;
    opacity: 0.8;
    justify-content: center;
    align-items: center;
    /*background: url('../assets/about/rocket.png') no-repeat;*/
  }
  #back-top:hover span{
    opacity: 1;
  }
  .el-icon-arrow-up{
    color: #ccc;
    font-size: 40px;
  }

  .fade-enter{
    opacity: 0;
  }
  .fade-enter-active{
    transition: opacity 1s;
  }

  .fade-leave-to{
    opacity: 0;
  }
  .fade-leave-active{
    transition: opacity 1s;
  }



</style>
